<template>
	<view class="container preferential">

		<view class="bac" style="background: #fff;">
			<image src="/static/img/2/2-7.png" class="over-view"></image>
			<view class="input-search" @click="toSearch">
				<input class="uni-input" confirm-type="search" placeholder="车厘子" placeholder-style="font-size:19upx" readonly />
				<text class="yticon icon-sousuo"></text>

			</view>
			<view class="carousel-section">
				<!-- 标题栏和状态栏占位符 -->
				<view class="titleNview-placing">
				</view>
				<!-- 背景色区域 -->
				<!-- <view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view> -->
				<swiper class="carousel" circular indicator-dots='true' indicator-active-color='#fff' v-if="carouselList.length>0">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
						<image :src="item" mode="aspectFill" />
					</swiper-item>
				</swiper>


			</view>
			<div class="goodslist"></div>

			<!-- 分类 -->
			<view class="cate-section">
				<view class="cate-item" v-for="item in catelist.lsChildClass" :key="item.id" @click="navToList(item,catelist)">
					<image :src="item.fullImageUrl"></image>
					<text>{{item.cName}}</text>
				</view>

			</view>

		</view>
		<!-- 标签 -->
		
		<view class="seckill-section m-t" v-for="i in tagsGroup" :key="i.id">
			<view class="s-header">
				<text class="title">{{i.tag_name}}</text>

			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="item in i.goods" :key="item.id" class="floor-item" @click="navToDetailPage(item)">
						<image :src="item.defaultAlbum" mode="aspectFill"></image>
						<!-- <text class="new">{{item.lsUpTags[0].tag_name}}</text> -->
						<text class="title clamp">{{item.pName}}</text>
						<text class="price"><text class="unit">￥</text>{{item.fSalePrice}}</text>
					</view>

				</view>
			</scroll-view>
		</view>
		<view class="seckill-section m-t">
			<view class="s-header">
				<text class="title">全部商品</text>
		
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="item in goodsList" :key="item.id" class="floor-item" @click="navToDetailPage(item)">
						<image :src="item.defaultAlbum" mode="aspectFill"></image>
						<!-- <text class="new">{{item.lsUpTags[0].tag_name}}</text> -->
						<text class="title clamp">{{item.pName}}</text>
						<text class="price"><text class="unit">￥</text>{{item.fSalePrice}}</text>
					</view>
		
				</view>
			</scroll-view>
		</view>

		

		<!-- 分享 -->
		<share ref="share" :contentHeight="900" :shareList="shareList"></share>
	</view>
</template>

<script>
	import share from '@/components/share';
	import guess from '@/components/like/guess.vue';
	export default {
		components: {
			share,
			guess
		},
		data() {
			return {
				titleNViewBackground: 'none',
				swiperCurrent: 0,
				swiperLength: 3,
				shareList: [],
				catelist: [],
				todayList: [],
				carouselList: [],
				goodsList: [],
				tagsGroup:[]


			};
		},

		async onLoad(options) {
			this.loadData();
			// this.shareList = await this.$api.json('shareList');
		},

		methods: {
			loadData() {
				
				
				// this.$SysCache.get("today") = Array.from(this.$SysCache.get("today"));
				
				this.catelist = this.$SysCache.get("cate")
				// this.catelist.lsChildClass = Array.from(this.catelist.lsChildClass);
				uni.setNavigationBarTitle({ title:this.catelist.cName}) 
				
				// for (const item of Array.from(this.$SysCache.get("today"))) {
				// 	if (item.productClass == this.catelist.id) {
				// 		this.todayList.push(item)
				// 	}
				// }
				// for (const d of Array.from(this.catelist.lsChildClass)) {
				// 	for (const s of d.lsChildClass) {
				// 		for(const item of Array.from(this.$SysCache.get("today")))
				// 			if (item.productClass == s.id) {
				// 				this.todayList.push(item)
				// 			}
				// 		}
				
				// }
				this.$Request.post4(
					this.$api.httpApi.cate.categoryBanner,{"class_id":this.catelist.id}
					).then(res=>{
						if(res.code == 1){
							this.carouselList = res.data.images_arr
							console.log(res.data.images_arr)
						
						}
					})
					this.$Request.post(
						this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
							queryCondition: {
								order: {
									fieldname: "iOrder",
									direction: "asc"
								},
								pageindex: 1,
								pagesize: 12,
								where: [{
									fieldname: "categoryid",
									valuefrom: this.catelist.id
								}]
							}
						}
					).then(res => {
						if (res.code == 200) {
							let temp = []	
							this.goodsList = res.data.data
							this.goodsList.forEach(item=>{
								if(item.lsUpTags){
									item.lsUpTags.forEach(ind=>{
										if(temp.length>0){
											if(temp.indexOf(ind) != -1){
												temp.push(ind)
											}
										}else{
											temp.push(ind)
										}
										
									})
								}
							})
							this.tagsGroup = temp
							let goods = []
							this.tagsGroup.forEach(item=>{
								this.goodsList.forEach(ind=>{
									if(ind.lsUpTags){
										ind.lsUpTags.forEach(dd=>{
											if(item.id == dd.id){
												goods.push(ind)
											}
											
										})
									}
										
								})
								this.$set(item,"goods",goods)
							})
								
								
						}
					})
				

			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},

			//详情页
			navToDetailPage(item) {
				
				let id = item.pid;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			tuijian() {
				uni.navigateTo({
					url: `/pages/inner/recommend`
				})
			},
			navToList(item,items){
				let id = item.id
				let name = item.cName
				this.$SysCache.put("cateData",items.lsChildClass,864000)
				uni.navigateTo({
					url: `/pages/cate/cateList?categoryid=${id}&name=${name}`
				})
			},
			toSearch(){
				uni.navigateTo({
					url: `/pages/search/search?categoryid=${this.catelist.id}`
				})
			}
			

		},

		onNavigationBarButtonTap(e) {
			// console.log(e)

			this.$refs.share.toggleMask();


		}

	}
</script>

<style lang="scss">
	page {
		position: relative;
		background: #f5f5f5;
		top: -88upx;
	}



	.m-t {
		margin-top: 16upx;
	}

	.over-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 400upx;
		// filter: blur(3upx);
	}

	scroll-view {

		.guess-section {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx;

			.guess-item {
				display: flex;
				flex-direction: column;
				width: 48%;
				padding-bottom: 29upx;
				background: #fff;
				margin-bottom: 21upx;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}

			}

			.image-wrapper {
				width: 100%;
				height: 330upx;
				border-radius: 3px;
				overflow: hidden;
				background: #fff;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.title {
				font-size: 23upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
				line-height: 35upx;
				padding-left: 30upx;
				padding-right: 30upx;
			}

			.price {
				font-size: 26upx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: rgba(240, 64, 111, 1);
				padding-left: 30upx;
				position: relative;

				.pay {
					font-size: 17upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}

				.collect {
					position: absolute;
					right: 29upx;
					bottom: 10upx;
					width: 30upx;
					height: 28upx;
					z-index: 1;
				}

			}


		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;
		background: #fff;

		// background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 23upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 79upx;
			height: 69upx;
			margin-bottom: 14upx;
			// border-radius: 50%;
			// opacity: .7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}



	/* 新品推荐 */
	.seckill-section {
		padding: 4upx 30upx 24upx;

		// background: #fff;
		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.title {
				font-size: 27upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			margin-right: 26upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			width: 250upx;
			line-height: 1.8;
			border-radius: 6upx;
			position: relative;

			image {
				height: 250upx;
				width: 250upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

			}

			.title {
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
				font-size: 23upx;
			}

			.price {
				font-size: 26upx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: rgba(240, 64, 111, 1);
			}

			.new {
				position: absolute;
				top: 0;
				left: 0;
				width: 98upx;
				height: 32upx;
				background: rgba(77, 200, 151, 1);
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 32upx;
			}

			.ranking {
				position: absolute;
				top: 14upx;
				left: 13upx;
				width: 43upx;
				height: 43upx;
			}
		}
	}


	/*热门专题*/
	.hot-tip {
		padding: 4upx 30upx 24upx;
		top: 0 !important;

		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.title {
				font-size: 27upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.right {
				flex: 1;
				text-align: right;
				font-size: 19upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
			}

		}

		.carousel {
			height: 323upx;

			.carousel-item {
				padding: 0;
				overflow: hidden;
				padding-right: 23upx;
				position: relative;

				.title {
					font-size: 25upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(68, 68, 68, 1);
				}

				.desc {
					font-size: 19upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(119, 119, 119, 1);
				}

				image {
					height: 333upx;
					border-radius: 0;
				}

				.cover {
					position: absolute;
					top: 47upx;
					left: 32upx;

					.title {
						display: block;
						font-size: 32upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
						line-height: 1;
					}

					.English {
						display: block;
						font-size: 20upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
						margin-top: 10upx;
						line-height: 1;
					}

					.timer {
						display: block;
						font-size: 25upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
						margin-top: 18upx;
						line-height: 1;
					}

					.btn {
						width: 103upx;
						height: 42upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20upx;
						color: #fff;
						border-radius: 30upx;
						border: 1px solid #fff;
						margin-top: 66upx;
					}
				}
			}



		}
	}



	/*商品列表*/
	.goodslist {
		padding: 0 26upx;
		margin-top: 130upx;

		.list-item {
			background: #fff;
			padding: 26upx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 31upx;
			border-radius: 16upx;

			image {
				width: 370upx;
				height: 289upx;

			}

			.list-info {
				padding: 0 30upx;

				.name {
					display: block;
					font-size: 40upx;
					font-family: CTBiaoSongSJ;
					font-weight: 400;
					color: rgba(255, 66, 102, 1);

				}

				.desc {
					display: block;
					font-size: 25upx;
					font-family: CTBiaoSongSJ;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);

				}

				.price {
					width: 163upx;
					height: 45upx;
					background: rgba(255, 47, 87, 1);
					border-radius: 22upx;
					font-size: 25upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 33upx;
				}

			}

			.left {
				image {}
			}
		}
	}

	.input-search {
		width: 100%;
		height: 69upx;
		position: relative;
		top: 100upx;
		padding: 0 26upx;
		z-index: 100;

		input {
			background: #fff;
			height: 100%;
			width: 100%;
			padding-left: 45upx;

		}

		.icon-sousuo {
			position: absolute;
			left: 38upx;
			top: 18upx;
			font-size: 33upx;

		}


	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;
		top: 130upx;

		.titleNview-placing {
			height: var(--status-bar-height);
			// padding-top: 377upx;
			box-sizing: content-box;
		}


		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 300upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 340upx;



		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 26upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
</style>
